<template>
  <div class="container">
    <!-- 顶部头像 点击登录 选择身份 -->
    <div class="top-box">
      <div class="avatar">
        <image :src="userInfo.avatar" class="avatar-img" mode="scaleToFill" />
      </div>

      <div
        class="login"
        type="primary"
        style="background-color: #0d7cff"
        v-if="isLogin"
      >
        点击登录
      </div>

      <div class="message-group" v-else>
        <div class="name">{{ userInfo.name }}</div>
        <div class="name" @click="selectRolesToggle" v-if="isRole">
          请选择身份
        </div>
      </div>
    </div>

    <div class="content" v-if="userRole == 1 || userRole == 2">
      <div class="content-group" @click="goRecordPage()">
        <div class="content-group-title">我的预约</div>
        <uni-icons type="right" size="20"></uni-icons>
      </div>
      <div class="content-group" @click="goQueryPage()">
        <div class="content-group-title">体检查询</div>
        <uni-icons type="right" size="20"></uni-icons>
      </div>
    </div>
    <!-- 选择用户角色 对话框 -->
    <view>
      <uni-popup ref="selectRoles" type="dialog">
        <uni-popup-dialog
          ref="selectRolesClose"
          mode="input"
          title="选择身份"
          @confirm="dialogConfirm"
          @close="dialogClose"
        >
          <radio-group @change="radioChange" class="radio-group">
            <label v-for="(item, index) in roleList" :key="item.value">
              <radio :value="item.value" :checked="index === current" />
              <view>{{ item.name }}</view>
            </label>
          </radio-group>
        </uni-popup-dialog>
      </uni-popup>
    </view>
  </div>
</template>

<script>
export default {
  data() {
    return {
      // 是否登录
      isLogin: false,

      // 身份列表
      roleList: [
        {
          name: "学生",
          value: 1,
        },
        {
          name: "教职员工",
          value: 2,
        },
        {
          name: "医护员工",
          value: 3,
        },
      ],
      // 是否选择身份
      isRole: true,
      // 用户信息
      userInfo: {},
      // 用户角色
      userRole: undefined,
      // 角色当前选择
      current: 0,
    };
  },
  onLoad(args) {
    this.userInfo = this.$store.state.user;
    this.userRole = this.$store.state.user.roles;
    console.log("my Role", this.userRole);
  },
  methods: {
    // 体检查询 页面
    goQueryPage() {
      uni.navigateTo({
        url: "/pages/query/index",
      });
    },
    // 预约记录 页面
    goRecordPage() {
      uni.navigateTo({
        url: "/pages/record/index",
      });
    },
    //选择用户角色
    radioChange(evt) {
      for (let i = 0; i < this.roleList.length; i++) {
        if (this.roleList[i].value === evt.detail.value) {
          this.current = i;
          break;
        }
      }
      this.userRole = evt.detail.value;
      // this.isRole = this.role ? false : true;
      console.log(this.isRole);
      console.log(this.userRole);
    },
    // 选择用户角色 对话框 关闭
    dialogClose() {
      console.log("点击关闭");
    },
    // 选择用户角色 对话框 确认
    dialogConfirm() {
      console.log("点击确认");
      console.log(this.userRole);
      if (this.userRole === 1) {
        uni.navigateTo({
          url: "/pages/stuInfo/index",
        });
      } else {
        uni.navigateTo({
          url: "/pages/companyInfo/index",
        });
      }
    },
    // 选择用户角色 对话框 打开
    selectRolesToggle() {
      this.$refs.selectRoles.open();
    },
  },
};
</script>

<style lang="scss" scoped>
.top-box {
  height: 20vh;
  border-radius: 8px;
  margin: 0.625rem;
  background-color: #0d7cff;
  display: flex;
  align-items: center;
  color: #fff;
  padding: 20px 0.625rem;
}
.avatar {
  width: 16vh;
  height: 16vh;
  border-radius: 5px;
  box-shadow: 0 2px 12px 0 rgba(255, 255, 255, 0.5);
}
.avatar-img {
  width: 100%;
  height: 100%;
  border-radius: 5px;
}
.login {
  letter-spacing: 4px;
  margin: 0 auto;
  background-color: #0d7cff;
}
.message-group {
  width: 100%;
  height: 26vh;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}
.name {
  letter-spacing: 4px;
  text-align: center;
  padding: 10px;
}
.role {
  background-color: #0d7cff;
  color: #fff;
}
.radio-group {
  margin-top: 1rem;
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: center;
  label {
    width: fit-content;
    display: flex;
    padding: 0 4px;
    view {
      font-size: 12px;
      line-height: 24px;
      align-content: center;
    }
  }
}
.content-group {
  padding: 10px;
  margin: 10px;
  border: 1px solid #ebeef5;
  border-radius: 6px;
  display: flex;
  justify-content: space-between;
  box-shadow: 0 2px 12px 0 rgba(151, 203, 245, 0.5);
}
</style>